<template>
  <li class="item">
    <div class="year">{{ item.year }}</div>
    <div class="baseBox">
      <div
        class="progressBar"
        :style="{ width: (item.salary / topSalary) * 100 + '%' }"
      >
        ￥{{ item.salary }}
      </div>
    </div>
    <span v-if="item.percent < 0 && item.percent"
      ><i class="iconfont iconicon_xiajiang" style="color:#fe6d67;"></i
      >{{ Math.abs(item.percent) }}%</span
    >
    <span v-else-if="item.percent > 0 && item.percent">
      <i class="iconfont iconicon_shangsheng" style="color:#00d47a;"></i
      >{{ Math.abs(item.percent) }}%</span
    >
    <span v-if="!item.percent"></span>
  </li>
</template>

<script>
export default {
  name: 'dataItem',
  props: ['item', 'topSalary']
}
</script>

<style lang="less" scoped>
.item {
  padding: 10px 0;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Regular;
  color: #545671;
  line-height: 20px;
  letter-spacing: 0px;
  .year {
    margin-right: 11px;
  }
  .baseBox {
    flex: 1;
    height: 12px;
    background-color: #ebdfdf;
    border-radius: 4px;
    .progressBar {
      box-sizing: border-box;
      padding: 0 6px;
      height: 12px;
      background-color: #fe6d67;
      border-radius: 4px;
      line-height: 12px;
      text-align: right;
      font-size: 11px;
      color: #ffffff;
    }
  }
  span {
    margin-left: 8px;
    text-align: center;
    width: 50px;
  }
}
</style>
